<template>
	<view>

		<image class="top-bg" src="../../../static/home/points_bg.png" mode=""></image>
		<view class="content">


			<view class="flex my-points">
				<text>我的积分</text>
				<image src="../../../static/home/points_info.png" mode="scaleToFill" style="width: 26upx;height: 26upx;"
					@click="showPop"></image>
			</view>

			<text class="points-count">500</text>


			<view class="item" style="margin: 30upx 40upx;padding-bottom: 20upx;">
				<text class="points-list-title">积分明细</text>

				<view v-if="recordList.length > 0">

					<view class="points-item" v-for="(item, index) in recordList" :key="index">

						<view class="points-item-left">
							<text class="name">{{filterNull(item.name)}}</text>
							<text class="time">{{filterNull(item.time)}}</text>
						</view>

						<text class="points-item-right"
							:class="item.points.indexOf('+') != -1 ? 'active':''">{{filterNull(item.points)}}</text>
					</view>

				</view>

				<no-data v-else></no-data>

			</view>

		</view>

		<u-popup :safeAreaInsetBottom="true" :safeAreaInsetTop="true" mode="center" :show="showInfo" round="10" overlay
			closeable closeOnClickOverlay @close="close">

			<view class="pop-content">
				<text class="btn-detail" style="align-self: center;">积分规则</text>

				<text class="pop-title">积分获取</text>
				<text class="pop-text">可以在积分任务中获取积分。积分任务是为本平台会员 提供获取积分奖励的功能模块，会员可通过此板块完成 相应任务获得对应积分奖励，积分可用于本平台内商品 兑换以及其他会员活动。</text>

				<text class="pop-title">积分使用</text>
				<text class="pop-text">积分可累计，可在平台内兑换各类权益；积分具有有效 期、使用范围和不可转赠的基本属性。 本积分不作为任何形式的货币，不作用于本平台以外的 任何其他服务。</text>

			</view>
			<!-- <view
				class="u-popup-slot"
				:style="{
					width: ['bottom', 'top'].includes(popupData.mode) ? '750rpx' : '200px',
					marginTop: ['left', 'right'].includes(popupData.mode) ? '480rpx' : '0',
				}"
			>
				<u-button
					type="success"
					text="点我关闭"
					customStyle="width: 200rpx"
					@click="show = !show"
				></u-button>
			</view> -->
		</u-popup>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				showInfo: false,
				recordList: [{
					name: '积分兑换',
					time: '2021.02.02-2021.02.28',
					points: '+200'
				}, {
					name: '积分兑换222',
					time: '2021.02.02-2022.02.28',
					points: '-20'
				}, {
					name: '积分兑换333',
					time: '2021.02.02-2023.02.28',
					points: '+20'
				}, ]
			}
		},
		methods: {
			showPop() {
				this.showInfo = true;
			},

			close() {
				this.showInfo = false;
			}
		}
	}
</script>

<style lang="scss" scoped>
	.top-bg {
		position: relative;
		top: -150upx;
		width: 100%;
		height: 420upx;
	}

	.content {
		position: relative;
		top: -420upx;
		@include flex(column);

		.my-points {
			align-items: center;
			margin-top: 55upx;
			align-self: center;

			text {
				color: $white;
				font-size: 30upx;
				margin-right: 7upx;
			}
		}

		.points-count {
			font-size: 40upx;
			color: $white;
			font-weight: bold;
			margin-top: 12upx;
			align-self: center;
		}


		.points-list-title {
			color: $black66;
			font-size: 28upx;
			margin-top: 35upx;
			align-self: center;
		}

	}

	.points-item {
		@include flex;
		margin: 24upx 39upx 24upx 29upx;
		align-items: center;
		justify-content: space-between;

		.points-item-left {
			@include flex(column);

			.name {
				font-size: 28upx;
				color: $black13;
				font-weight: bold;
			}

			.time {
				color: $black99;
				margin-top: 8upx;
				font-size: 24upx;
			}
		}

		.points-item-right {
			color: $black99;
			font-size: 26upx;
			font-weight: bold;
		}

		.active {
			color: $green12;
		}
	}

	.pop-content {
		@include flex(column);

		width: 650upx;
		padding-bottom: 80upx;


		.pop-title {
			color: $green12;
			font-size: 28upx;
			margin: 60upx 0 30upx 70upx;
		}
		
		.pop-text{
			color: $black33;
			font-size: 22upx;
			line-height: 42upx;
			margin: 0 50upx 0 70upx;
		}
	}
</style>
